<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <script>
        /* 效果   拖着div 在页面的任意位置走 
        
        如果拖到中间 放手  就停在这个位置   left 和top的值都会增加 
        
        鼠标先按下去 
        鼠标移动  
        鼠标抬起
        

        按下  div 跟着鼠标走 
        移动  div 跟着鼠标走
        抬起  div 不动

        按下  需要获取鼠标的位置  
        移动  实时获取鼠标的位置 
        抬起  停在的位置 实时获取的鼠标 - 按下时候的鼠标的位置 这就是移动的距离  

        防止越界  

        [0,可视化窗口的距离 - 盒子的宽度]  

        
        */


        // 获取元素
        var divEle = document.querySelector('div');
        // 给div添加鼠标按下事件 获取鼠标实时位置 
        // 得先通过事件对象才可以 获取鼠标的位置 初始的位置 

        var startX=0,startY=0;//记录初始鼠标坐标点 
        var startLeft=0,startTop=0 // 记录盒子的初始位置
        var flag = false; // 设置一个开关 默认不动   
        divEle.onmousedown = function(e){
            flag = true; // 开关打开 开始移动  
            // 获取鼠标的初始位置
            startX = e.clientX;
            startY = e.clientY;

            // 获取盒子的初始位置
            startLeft = divEle.offsetLeft;
            startTop = divEle.offsetTop;
            
        }


        //div添加鼠标移动事件 
        // 因为是在整个区域内移动 所以要给document添加事件
        document.onmousemove= function(e){
            if(flag == false){ // 如果开关是关闭的 就不移动
                return;
            }
            // 获取移动的距离 
            // 实时坐标点的距离减去初始的坐标点的距离
            var moveX = e.clientX - startX;
            var moveY = e.clientY - startY;
            // 为什么获取移动距离 
            // 用来计算盒子最新的位置  
            var x = moveX + startLeft;
            var y = moveY + startTop;
            if(x<=0){
                x=0;
            }
            if(y<=0){
                y=0;
            }
            //必须是 可视化窗口的宽度 - 盒子的宽度范围内
            if(x>=document.documentElement.clientWidth - divEle.offsetWidth){
                x = document.documentElement.clientWidth - divEle.offsetWidth;
            }

            

            if(y>=document.documentElement.clientHeight - divEle.offsetHeight){
                y = document.documentElement.clientHeight - divEle.offsetHeight;

            }

            divEle.style.left = x + 'px';
            divEle.style.top = y + 'px';
        }


        // div添加鼠标抬起事件 抬起来不需要获取信息 不需要事件对象 

        divEle.onmouseup = function(){
            flag = false; // 开关关闭 不移动
        }
    </script>
</body>
</html>